<template>
  <ul>
    <li class="findItem" @click="details">
      <el-image :src="arrImg" lazy></el-image>
      <div class="findCont">
        <div class="title">
          <p>{{contentItem.arer=='undefined'?contentItem.province:contentItem.arer}}-{{contentItem.shName}} | {{contentItem.shAcreage}}㎡</p>
          <!--<span>{{contentItem.reTime}}</span>-->
        </div>
        <div class="price">
          <label>{{contentItem.shAddress}}</label>
          <b>
            {{contentItem.rentPrice}}元
            <span>/月</span>
          </b>
        </div>
        <div class="tag">
          <span class="items" v-for="(info, i) in arrTag" :key="i">{{info.name}}</span>
        </div>
        <div style="text-align: right">
          <el-button type="text" @click.stop v-if="false">下架</el-button>
          <el-button type="text" v-if="$route.fullPath!=='/shangpu'&&$route.fullPath!=='/findshop'" @click.stop="$router.push('/setting/push?id='+contentItem.id)">修改</el-button>
        </div>
      </div>
    </li>
  </ul>
</template>

<script>
export default {
  props: ["contentItem", "id"],
  data() {
    return {};
  },
  methods: {
    details() {
      window.open("/#/details" + this.id + "/" + this.contentItem.id);
    },
    partsToArr() {
      var string = this.contentItem.shParts;
      if (string) {
        let newArr = [];
        let arr = string.split(",");
        for (let i = 0; i < arr.length; i++) {
          newArr.push(this.$store.state.partsArr[arr[i] - 1]);
        }
        return newArr;
      }
    },
    stringToArr() {
      var string = this.contentItem.shPic;
      let arr = string.split(",");
      if (arr[0] === "undefined" || string=="") {
        return this.$store.state.defaultCover;
      } else {
        return arr[0];
      }
    }
  },
  computed: {
    arrImg() {
      return this.stringToArr();
    },
    arrTag() {
      return this.partsToArr();
    }
  },
  created() {}
};
</script>
<style scoped lang="less">
.tag {
  margin-top: 10px;
}
.findItem:hover {
  /*background: #eee;*/
}
.findItem {
  padding: 20px;
  border-bottom: 1px solid rgba(221,221,221,1);
  &:last-child{
   // border-bottom: 0;
  }
  .findCont {
    padding-left: 18px;
    width: calc(100% - 200px);
  }
  display: flex;
  .title {
    p {
      overflow: hidden;
      white-space: nowrap; //不换行
      text-overflow: ellipsis;
      height: 40px;
      width: calc(100% - 150px);
      font-size:18px;
      font-weight:bold;
      color:rgba(51,51,51,1);
    }
    span {
      width: 150px;
      display: block;
      color: #999;
      font-size: 14px;
      text-align: right;
    }
    justify-content: space-between;
    align-items: center;
    display: flex;
  }
  .price {
    display: flex;
    justify-content: space-between;
    label{
      font-size: 14px;
      line-height: 13px;
      color: #777777;
    }
    b {
      font-size: 26px;
      line-height: 23px;
      color: #E41E1D;
      font-weight: normal;
    }
  }

  .el-image {
    width: 200px;
    height: 150px;
  }
  .items {
    background:rgba(239,244,246,1);
    margin-right: 10px;
    font-size: 12px;
    color: #777777;
    padding: 3px 5px;
  }
  /deep/ .el-button--text{
    color: #E41E1D;
  }
}
</style>
